import React, { Component } from 'react'
import { Button, WingBlank, InputItem, List, WhiteSpace, Picker, Toast, Tag, DatePicker } from 'antd-mobile'
import getData from '../../server/GetData'
import uuid from '../../server/UUIDUtils'
import { getSearchParams } from '../../utils/param'
import dateFormatter from '../../utils/dateFormatter'
import { expPhone } from '../../utils/utils'
import './index.css'

export default class index extends Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '',
            room: '',
            phone: '',
            bedNo: '',
            patientRelation: '',
            // depName: '',
            depValue: '',
            depLabel: '',
            deptType: '',
            depData: [],
            wjTitle: '问卷',
            inhosTime: '',
            inhosDate: '', // yyyy-MM-dd格式
            contentMap: {
                zy: '感谢您对我院的信任与支持，为了进一步改进南京同仁医院就医环境，改善服务态度，提升服务质量，请配合完成此次问卷调查，您可根据此次住院的感受，对我院各方面的情况进行如实评价，并提出您宝贵的意见。谢谢您的协助和配合！',
                mz: '感谢您对我院的信任与支持，为了提升我院的医疗服务品质，使我们的工作不断改进， 更能贴合您的需求，我院正在开展门诊满意度调查，此次调查需要向您及家属了解一些有关我院医疗服务情况，恳请您参与此次调查，根据此次就诊的感受，对我院各方面的情况进行如实评价，并提出您宝贵的意见。本次调查约占用您10分钟左右时间，谢谢您的协助和配合！',
                qt: '非常感谢您一直以来对我们工作的支持！为您提供更优美的环境，更贴心的会员服务是我们一直努力的目标，在此，我们将进行会员满意度测评，以进一步提升我们的服务品质。本次测评就社区现阶段已开展的服务罗列出九大部门，请您对我们的工作进行客观评价。感谢您的支持与参与！'
            }
        }
    }
    // onChangeDep(val){
    //     this.setState({
    //         depValue: val[0]
    //     })
    // }
    onChangeDep(v) {
        let label = '';
        this.state.depData.forEach(item => {
            if (item.value == v) {
                label = item.label
            }
        })
        this.setState({
            depValue: v,
            depLabel: label
        })
    }
    getDate(d) {
        this.setState({
            inhosDate: d,
            inhosTime: dateFormatter.format(d, 'yyyy-MM-dd')
        })
    }
    isZy() {
        return this.state.deptType === 'zy'
    }
    isQt() {
        return this.state.deptType === 'qt'
    }
    toNext() {
        if (!this.state.name) {
            Toast.info('请填写姓名')
            return
        }
        if (!this.state.phone) {
            Toast.info('请填写手机号')
            return
        }
        if (this.state.deptType === 'qt') {
            if (!this.state.room) {
                Toast.info('请填写房号')
                return
            }
        } else {
            if (!this.state.depLabel || !this.state.depValue) {
                Toast.info('请填写姓名、手机号、就诊科室')
                return
            }
        }
        if (!expPhone(this.state.phone.replace(/\s*/g, ""))) {
            Toast.info('请填写正确手机号')
            return
        }
        console.log(this.state)
        this.props.history.push({
            pathname: '/questionnaire',
            // query: { 
            //     name: this.state.name,             
            //     phone: this.state.phone.replace(/\s*/g,""),
            //     // depValue: this.state.depValue,
            //     depName: this.state.depName,
            //     bedNo: this.state.bedNo
            // },
            search: `?name=${encodeURIComponent(this.state.name)}` +
                `&patientRelation=${encodeURIComponent(this.state.patientRelation)}` +
                `&inhosTime=${this.state.inhosTime}` +
                `&phone=${this.state.phone.replace(/\s*/g, "")}` +
                `&depName=${encodeURIComponent(this.state.depLabel)}` +
                `&depName=${encodeURIComponent(this.state.depLabel)}` +
                `&depId=${this.state.depValue[0]}` +
                `&deptType=${this.state.deptType}` +
                `&wjId=${this.state.wjId}`
        });
    }
    componentDidMount() {
        let that = this
        document.title = '用户信息'
        let searchParams = getSearchParams(this.props.location.search)
        let deptType = searchParams.deptType
        let wjId = searchParams.wjId
        let wjTitle = decodeURIComponent(searchParams.wjTitle)
        this.setState({
            deptType,
            wjId,
            wjTitle
        })
        Toast.loading('科室数据加载中...', 30, () => { });
        getData({
            data: {
                bizContent: {
                    deptType: deptType
                },
                method: 'getDeptInfo',
                bizId: uuid()
            }
        }).then(res => {
            Toast.hide()
            if (res.rspCode != 200) {
                Toast.info(res.rspMsg, 2);
            } else if (res.bizRspCode != 1) {
                Toast.info(res.bizRpsMsg, 2);
            } else {
                let bizContent = res.bizContent
                let depList = JSON.parse(bizContent) ? JSON.parse(bizContent).deptList : []
                console.log(depList)
                let list = []
                depList.forEach(dep => {
                    list.push({
                        value: dep.id,
                        label: dep.deptName
                    })
                })
                this.setState({
                    depData: list
                })
            }
        }).catch(err => {
            Toast.hide()
        })
    }
    render() {
        return (
            <div className="questInfo-class">
                <WingBlank>
                    <List renderHeader="用户信息">
                        <div className="header">
                            {/* <div className="line"></div> */}
                            {/* <div className="title">{this.state.wjTitle}</div> */}
                            <div className="content">
                                <p>尊敬的女士/先生：您好!</p>
                                <p className="indent_2em">{this.state.contentMap[this.state.deptType]}</p>
                            </div>
                        </div>
                    </List>
                    <List renderHeader="您的姓名">
                        <InputItem onBlur={v => this.setState({ name: v })} />
                    </List>
                    <List renderHeader="手机号码">
                        <InputItem onBlur={v => this.setState({ phone: v })} type="phone" />
                    </List>
                    {
                        this.isQt() ?
                            <List renderHeader="房号">
                                <InputItem onBlur={v => this.setState({ room: v })} />
                            </List>
                            :
                            <List renderHeader="就诊科室">
                                <Picker
                                    data={this.state.depData}
                                    cols="1"
                                    value={this.state.depValue}
                                    onChange={v => this.onChangeDep(v)}
                                >
                                    <List.Item arrow="horizontal">{this.state.depLabel}</List.Item>
                                </Picker>
                                {/* <InputItem onBlur={v => this.setState({depName: v})}/> */}
                            </List>
                    }

                    {/* <List renderHeader="住院病区及床号（选填）">
                        <InputItem onBlur={v => this.setState({bedNo: v})}/>
                    </List> */}
                    {
                        this.isZy() ?
                            <List renderHeader="与患者关系">
                                <InputItem onBlur={v => this.setState({ patientRelation: v })} />
                            </List>
                            :
                            <div></div>
                    }
                    {
                        this.isZy() ?
                            <List renderHeader="入院时间">
                                <DatePicker
                                    mode="date"
                                    title="入院时间"
                                    extra="选择时间"
                                    value={this.state.inhosDate}
                                    onChange={d => this.getDate(d)}
                                >
                                    <List.Item arrow="horizontal">{' '}</List.Item>
                                </DatePicker>
                            </List>
                            :
                            <div></div>
                    }

                    <WhiteSpace size="xl" />
                    <WhiteSpace size="lg" />
                    <Button onClick={v => this.toNext()} className="btn-next">下一步</Button>
                </WingBlank>
            </div>
        )
    }
}
